<template>
  <div class="business-box flex_between">

    <transition name="left" appear>
      <div class="left">
        <ItemBox v-if="grade==1 || grade == 2" :backgroundImage="require('@/assets/images/licang/kuang/k5.png')"
          @gradeClick="gradeClick" :title="title" style="height: 45%;" class="left-top">
          <span class="date" slot="select">{{date}}</span>
          <div slot="content" class="flex_center left-top1">
            <EchartsPie class="pie-echarts" :label="item.title" :data="item.data" v-for="(item,index) in leftTop1"
              :unit="item.unit" :key="index"></EchartsPie>
          </div>
          <div slot="content" class="left-top2">
            <Money :data="leftTop2"></Money>
          </div>
        </ItemBox>
        <ItemBox v-if="grade==1|| grade == 2" title="今日商业状态" style="height: 26%;"
          :backgroundImage="require('@/assets/images/licang/kuang/k3.png')" class="left-center">
          <span class="date" slot="select">{{date}}</span>
          <TradeDetail :lines="6" slot="content" style="margin-top: 10px;" />
        </ItemBox>
        <ItemBox v-if="grade==3" @gradeClick="gradeClick" :title="title" style="height: 27%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k3.png')">
          <Info :data="leftTop2" slot="content"></Info>
        </ItemBox>
        <ItemBox v-if="grade==3" title="商家营业数据" style="height:44%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k5.png')">
          <EchartsLine yName="商家营业额分析" color="rgba(18, 220, 221," labelUnit="元" slot="content" :data="sjyyesj"
            style="width: 100%;height:48%;margin-bottom: 2%;" :nameTextStyle="[0, 10, 5, 0]">
          </EchartsLine>
          <EchartsLine yName="商家人流量分析" labelUnit="人" slot="content" :data="sjrllsj" style="width: 100%;height:48%;">
          </EchartsLine>
        </ItemBox>
        <ItemBox title="营商环境预警" style="height: 25.5%;" :backgroundImage="require('@/assets/images/licang/kuang/k3.png')"
          class="left-bottom">
          <div class="environment-box" slot="content">
            <EchartsMoreLine class="moreLine" :data="leftBottom1"
              :color="['rgba(18, 220, 221,','rgba(104, 187, 196,','rgba(88, 165, 92,','rgba(242, 189, 66,',]">
            </EchartsMoreLine>
            <div class="pie-box" @click="addAlarmPoints">
              <EchartsPercentage unit="%" :titleSize="14" v-for="(item,index) in leftBottom2" :key="index"
                class="pie-echarts" :label="item.name" :data="item.rate" :barWidth="10"></EchartsPercentage>
            </div>

          </div>

        </ItemBox>
      </div>
    </transition>
    <div class="center">
      <Statistics :data="statistics"></Statistics>
      <DirectionTI style="width:66% ;position: relative;top: 25px;" @navClick="navClick" ref="DirectionTI">
      </DirectionTI>
      <!-- <div class="backBtnWrap" v-if="grade > 1">
        <el-button icon="el-icon-back" size="large" circle @click="grade -= 1"></el-button>
      </div> -->
    </div>
    <transition name="right" appear>
      <div class="right">
        <ItemBox title="当前待处置风险" style="height: 33.5%;"
          :backgroundImage="require('@/assets/images/licang/kuang/k1.png')" class="right-top">
          <span class="date" slot="select">{{date}}</span>
          <InfoList @dispose="dispose" slot="content" :list="infoList.list" :tags="infoList.tags"></InfoList>
        </ItemBox>
        <ItemBox title="已下发处置任务统计" style="height: 36%;" class="right-center"
          :backgroundImage="require('@/assets/images/licang/kuang/k4.png')">
          <TabPie slot="content" ref="TabPie" :data="tabPieData"></TabPie>
        </ItemBox>
        <ItemBox title="行政资源预警" style="height: 27%;" :backgroundImage="require('@/assets/images/licang/kuang/k3.png')"
          class="right-bottom">
          <div class="pie-box" slot="content">
            <div v-for="(item,index) in rightBottom" :key="index" class="flex_center_direction2">
              <EchartsPercentage :label="item.rate+'%'" unit="%" class="pie-echarts" :data="item.rate">
              </EchartsPercentage>
              <span style="color:#ffffff;font-size: 17px;">{{item.name}}</span>
            </div>
          </div>
        </ItemBox>
      </div>
    </transition>
    <!-- 处置弹窗 -->
    <Pop ref="Pop" :type="popInfo.type" :info="popInfo.info"></Pop>
  </div>
</template>

<script>
  import Money from '@/components/TradeDetail/money'
  import Info from '@/components/TradeDetail/info'
  import TabPie from '@/components/echarts/pie/tab-pie'
  import MarkData from '@/components/amap/marks'
  import { mapGetters } from 'vuex';
  import Statistics from "@/components/image-text/statistics";
  let gradeList = [{ name: '李沧区汇总', value: '1' }, { name: '餐饮', value: '2' }, { name: '商户信息', value: '3' }]
  import streetData from '@/components/amap/streetData'
  export default {
    name: 'Business',
    components: {
      TabPie, Money, Info, Statistics
    },
    computed: {
      ...mapGetters([
        'isMapReady',
        'map'
      ])
    },
    data() {
      return {
        gradeList: JSON.parse(JSON.stringify(gradeList)),
        grade: 1,//等级
        title: '今日商业实时汇总',
        date: null,
        leftTop1: [
          {
            title: '门店数量',
            unit: '个',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 150 },
              { name: '教育', value: 160 },
              { name: '健康', value: 165 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 181 },
            ]
          },
          {
            title: '交易金额',
            unit: '万元',
            data: [
              { name: '餐饮', value: 100 },
              { name: '娱乐', value: 130 },
              { name: '教育', value: 150 },
              { name: '健康', value: 175 },
              { name: '商场', value: 139 },
              { name: '酒店', value: 131 },
            ]
          },
          {
            title: '从业人员',
            unit: '人',
            data: [
              { name: '餐饮', value: 130 },
              { name: '娱乐', value: 140 },
              { name: '教育', value: 134 },
              { name: '健康', value: 145 },
              { name: '商场', value: 154 },
              { name: '酒店', value: 132 },
            ]
          },
        ],
        leftTop2: [
          { name: '餐饮', value: 680.82, store: 234, type: "up", person: 4345, compare: 3 },
          { name: '娱乐', value: 111.73, store: 844, type: "down", person: 2342, compare: 2 },
          { name: '教育', value: 88.92, store: 198, type: "up", person: 1363, compare: 3 },
          { name: '健康', value: 41.06, store: 124, type: "up", person: 7543, compare: 3 },
          { name: '商城', value: 959.89, store: 12, type: "up", person: 2346, compare: 3 },
          { name: '酒店', value: 289.65, store: 23, type: "up", person: 1423, compare: 3 },
        ],
        //商家营业额数据
        sjyyesj: [
          { name: '1', value: 12342 },
          { name: '2', value: 23234 },
          { name: '3', value: 24326 },
          { name: '4', value: 34663 },
          { name: '5', value: 22474 },
          { name: '6', value: 43245 },
          { name: '7', value: 15242 },
        ],
        //商家人流量数据
        sjrllsj: [
          { name: '1', value: 432 },
          { name: '2', value: 435 },
          { name: '3', value: 345 },
          { name: '4', value: 456 },
          { name: '5', value: 235 },
          { name: '6', value: 353 },
          { name: '7', value: 253 },
        ],
        leftBottom1: {
          xData: ['1', '3', "4", "5", '6', '7', "9",],
          yData: [{ name: '支付情况', data: [2, 3, 3, 5, 4, 3, 3] },
          { name: '耗水数据', data: [12, 13, 16, 13, 17, 43, 13] },
          { name: '耗电数据', data: [24, 23, 23, 24, 34, 26, 28] },
          { name: '网络流量', data: [32, 43, 36, 33, 31, 37, 38] }],
        },
        leftBottom2: [
          {
            name: '公共厕所',
            rate: 16,
          },
          {
            name: '停车场',
            rate: 33,
          },
          {
            name: '铁路线路',
            rate: 27,
          },
          {
            name: '公交站',
            rate: 7,
          },
        ],
        rightBottom: [
          {
            name: '巡查警力预警',
            rate: 24,
          },
          {
            name: '应急资源预警',
            rate: 23,
          },
          {
            name: '消费券预算预警',
            rate: 16,
          },
          {
            name: '资源医疗预警',
            rate: 25,
          },
        ],
        tabPieData: [
          {
            value: 'a',
            name: "行政街区",
          },
          {
            value: 'b',
            name: "行业分类",
          },
          {
            value: 'c',
            name: "行政单位",
          }
        ],
        //处置风险数据
        infoList: {
          tags: [{ label: '公交线路' }, { label: '车流拥堵' }],
          list: [
            { title: '李沧万达站人流拥堵', desc: '上报来源：389公交车', dispatch: '下发到：李沧区交警支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
            { title: '李沧维克商城停车场车流拥堵', desc: '上报来源：389公交车', dispatch: '下发到：李沧区李沙路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
            { title: "九水路车流拥堵", desc: '上报来源：603公交车', dispatch: '下发到：李沧区李村中队支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
            { title: '黑龙江路拥堵', desc: '上报来源：645公交车', dispatch: '下发到：李沧区遵义路支队', time: this.$moment().format('YYYY-MM-DD HH:mm:ss') },
          ]
        },
        statistics: [
          { title: '年累计交易金额/元', value: '240562530', icon: require('@/assets/images/licang/icon/icon_sy_3@2x.png') },
          { title: '每年累计人流量/人次', value: '695928', icon: require('@/assets/images/licang/icon/icon_sq_1@2x.png') },
          { title: '人年累计交易金额/月', value: '4538572', icon: require('@/assets/images/licang/icon/icon_sy_1@2x.png') },
          { title: '月累计人流量/人次', value: '58483', icon: require('@/assets/images/licang/icon/icon_sy_2@2x.png') },
        ],
        popInfo: {},
        timer: null,

      };
    },
    created() {
      this.getDate()
      this.initInterval()
      this.initXData()
    },
    mounted() {
      this.$store.dispatch('focusMainDistrict')
      this.$store.dispatch('addConstantMarks', {
        type: 'business', onClick: () => {
          this.grade = 3
        }
      })
      this.initData()
      this.setMap(this.grade)
    },
    watch: {
      isMapReady(val) {
        if (val) {
          this.setMap(this.grade)
        }
      },
      grade(val) {
        if (val > 3) {
          this.grade = 3
        }
        this.setMap(val)
      }
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.$store.dispatch('resetOverlay', 'business')
      this.$store.dispatch('resetCenterAndZoom')
    },
    methods: {
      setMap(val) {
        if (val == 1) {
          if (this.map) {
            this.map.clearMap()
          }
          this.$store.dispatch('focusMainDistrict')
          this.$store.dispatch('addConstantMarks', {
            type: 'business', onClick: (e) => {

              this.grade = 3
              let newArr = JSON.parse(JSON.stringify(gradeList))
              this.title = newArr.slice(0, 3)
              this.tabPieData = []
              this.initData()
              this.$refs.DirectionTI.activaName = '餐饮'
            }
          })
          // const marks = MarkData.lv1
          // this.$store.dispatch('addMarks', { data: marks, onClick: () => {
          //     this.grade += 1
          //   }
          // })
          this.$refs.DirectionTI.reset()
          this.$store.dispatch('resetCenterAndZoom')
        } else if (val == 2) {
          if (this.map) {
            this.map.clearMap()
          }
          this.$store.dispatch('focusMainDistrict')
          this.$store.dispatch('resetCenterAndZoom')
          const marks = MarkData.lv2
          this.$store.dispatch('addMarks', {
            data: marks, onClick: () => {
              this.grade = 3
              let newArr = JSON.parse(JSON.stringify(gradeList))
              this.title = newArr.slice(0, 3)
              this.tabPieData = []
              this.initData()
            }
          })
          this.$store.dispatch('addConstantMarks', {
            type: 'business', onClick: () => {
              this.grade = 3
            }
          })
        } else if (val == 3) {
          this.$store.dispatch('focusStreetByName', 'licun')
          const marks = MarkData.lv3
          const d = streetData['licun']
          var txt = new AMap.Text({
            text: '李村街道',
            anchor: "center", // 设置文本标记锚点
            draggable: false,
            clickable: false,
            angle: 0,
            style: {
              "background-color": "transparent",
              "text-align": "center",
              "font-size": "30px",
              color: "#fff",
              border: "none",
              "font-weight": "bold",
            },
            position: d.center,
          });

          txt.setMap(this.map);
          this.$store.dispatch('addMarks', {
            data: marks, onClick: (mark) => {
              console.log(mark, 'mark')
              this.$store.dispatch('openInfoWindow', { position: mark, type: "business" })
            }
          })
        }
      },
      //获取当前日期
      getDate() {
        this.date = this.$moment().format('YYYY-MM-DD')
      },
      initInterval() {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
        }, 80000)
      },
      initXData() {
        this.leftBottom1.xData = this.$getRecent7Hours()
        let recentWeekDates = this.$getRecentWeekDates()
        for (let i in this.sjyyesj) {
          this.sjyyesj[i].name = recentWeekDates[i]
          this.sjrllsj[i].name = recentWeekDates[i]
        }
      },
      //随机数据
      initData() {
        for (let items of this.leftTop1) {
          for (let item of items.data) {
            item.value = Number((Math.round(Math.random() * 200)).toFixed(0))
          }
        }
        this.leftTop2 = [
          { name: '小吃快餐', value: 124.82, store: 234, type: "up", person: 2352, compare: 3 },
          { name: '蛋糕饮品', value: 54.73, store: 844, type: "down", person: 1432, compare: 2 },
          { name: '自助餐厅', value: 35.92, store: 198, type: "up", person: 2353, compare: 13 },
          { name: '特色餐厅', value: 53.06, store: 124, type: "up", person: 2146, compare: 22 },
          { name: '家常餐厅', value: 335.89, store: 12, type: "up", person: 3542, compare: 15 },
          { name: '特色料理', value: 234.65, store: 23, type: "up", person: 2335, compare: 3 },
        ]
        this.$refs.TabPie.initPie()
        //营商环境
        for (let i in this.leftBottom1.yData[0].data) {
          this.$set(this.leftBottom1.yData[0].data, i, this.$randomNum(1, 10))
        }
        for (let i in this.leftBottom1.yData[1].data) {
          this.$set(this.leftBottom1.yData[1].data, i, this.$randomNum(11, 20))
        }
        for (let i in this.leftBottom1.yData[2].data) {
          this.$set(this.leftBottom1.yData[2].data, i, this.$randomNum(21, 30))
        }
        for (let i in this.leftBottom1.yData[3].data) {
          this.$set(this.leftBottom1.yData[3].data, i, this.$randomNum(31, 40))
        }
        //营商环境
        for (let item of this.leftBottom2) {
          item.rate = this.$randomNum(30, 60)
        }
        //行政资源预警
        for (let item of this.rightBottom) {
          item.rate = this.$randomNum(20, 60)
        }
        this.$set(this.statistics[0], 'value', this.$randomNum(200000000, 300000000))
        this.$set(this.statistics[1], 'value', this.$randomNum(6000000, 70000000))
        this.$set(this.statistics[2], 'value', this.$randomNum(50000000, 60000000))
        this.$set(this.statistics[3], 'value', this.$randomNum(500000, 600000))
      },
      navClick(e) {
        this.initData()
        this.$refs.TabPie.title = '行政街区'
        let newArr = JSON.parse(JSON.stringify(gradeList))
        this.title = newArr.slice(0, 2)
        this.$refs.TabPie.activeName = 'a'
        this.tabPieData = [
          {
            value: 'a',
            name: "行政街区",
          },
          {
            value: 'c',
            name: "行政单位",
          }
        ]
        this.grade = 2
      },
      //处置
      dispose(e) {
        this.popInfo = {
          type: '交通疏导指令',
          info: e.dispatch.replace('下发到：', '')
        }
        this.$refs.Pop.open = true
      },
      //等级点击
      //等级点击
      gradeClick(e) {
        if (typeof e != 'string') {
          if (e.value == 1) {
            this.title = '今日商业实时汇总'
            this.grade = 1
            this.leftTop2 = [
              { name: '餐饮', value: 680.82, store: 234, type: "up", person: 4345, compare: 3 },
              { name: '娱乐', value: 111.73, store: 844, type: "down", person: 2342, compare: 2 },
              { name: '教育', value: 88.92, store: 198, type: "up", person: 1363, compare: 3 },
              { name: '健康', value: 41.06, store: 124, type: "up", person: 7543, compare: 35 },
              { name: '商城', value: 959.89, store: 12, type: "up", person: 2346, compare: 54 },
              { name: '酒店', value: 289.65, store: 23, type: "up", person: 836, compare: 2 },
            ]
            this.$refs.DirectionTI.activaName = ''
            this.tabPieData = [
              {
                value: 'a',
                name: "行政街区",
              },
              {
                value: 'b',
                name: "行业分类",
              },
              {
                value: 'c',
                name: "行政单位",
              }
            ]
          } else {
            let newArr = JSON.parse(JSON.stringify(gradeList))
            this.title = newArr.slice(0, e.value)
            this.grade = Number(e.value)
            if (e.value == 2) {
              this.tabPieData = [
                {
                  value: 'a',
                  name: "行政街区",
                },

                {
                  value: 'c',
                  name: "行政单位",
                }
              ]
            }
            if (e.value == 3) {
              this.tabPieData = []
            }
          }
        }
        this.initData()

      },
      addAlarmPoints() {
        const marks = MarkData.lv33
        this.$store.dispatch('addMarks', {
          data: marks, type: 1, onClick: mark => {
            this.$store.dispatch('openInfoWindow', { position: mark, type: "alarm" })
          }
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  .business-box {
    width: 100%;
    height: 100%;
    align-items: start;

    .left,
    .right {
      pointer-events: fill;
      width: 24.5%;
      height: 100%;

      .date {
        font-size: 22px;
        margin-right: 20px;
        color: rgba(255, 255, 255, 0.8)
      }

      @media (max-width: 2600px) {
        .date {
          font-size: 26px;
        }
      }

      /* background-color: red; */
    }

    .left {
      .left-top {
        .left-top1 {
          .pie-echarts {
            width: 33%;
            height: 170px;
          }
        }

        .left-top2 {
          margin-top: 10px;
          width: 100%;
          height: calc(100% - 170px);

        }
      }

      .left-bottom {
        .environment-box {
          width: 100%;
          display: flex;
          height: 100%;

          .moreLine {
            width: 66%;
          }

          .pie-box {
            width: 34%;
            height: 100%;

            margin-left: 45px;

            .pie-echarts {
              width: 115px;
              float: left;
              margin: 5px 14px 0 0;
              height: 115px;
            }
          }
        }

      }
    }

    .center {
      flex: 1;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      pointer-events: fill;
      position: relative;

      .backBtnWrap {
        position: absolute;
        top: 20%;
        left: 40px;
        width: 80px;
        height: 80px;
        transform: translateY(-50%);

        .el-button {
          font-size: 30px;
        }
      }
    }

    .right {
      .right-bottom {
        .pie-box {
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: space-between;

          .pie-echarts {
            width: 150px;
            float: left;
            height: 150px;
            margin-bottom: 5px;
          }

        }
      }
    }

    .lWrap {
      width: 100%;
      padding-right: 40px;
      padding-top: 10px;
    }

  }
</style>